<script setup>
import { Delete, Plus } from '@element-plus/icons-vue'


const props = defineProps({
    formData: {
        type: Object,
        default: {}
    },
    index: {
        type: Number,
    },
})

const addOption = (options) => {
    const newOption = `选项${options.length + 1}`
    options.push(newOption)
}

const removeOption = (options, index) => {
    options.splice(index, 1)
}
</script>

<template>
    <div class="form-item">
        <div class="form-index">
            <div>
                {{ index }}
            </div>
        </div>
        <div class="form-content">
            <div class="form-header">
                <el-input v-model="formData.label" :input-style="{ border: 'none' }" class="title-input"
                    placeholder="请输入标题"></el-input>
            </div>
            <div class="form-desc">
                <el-input v-model="formData.desc" :placeholder="formData.placeholderDesc"></el-input>
            </div>
            <div v-if="formData.type === 'radio'" class="options-container">
                <div v-for="(item, index) in formData.options" :key="index" class="option-item">
                    <el-radio :label="item" style="width: 95%;">{{ item }}</el-radio>
                    <el-button type="danger" link @click="removeOption(formData.options, index)" style="width: 5%;">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </el-button>
                </div>
                <el-button type="primary" link @click="addOption(formData.options)" class="add-option-btn">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    添加选项
                </el-button>
            </div>
            <div v-else-if="formData.type === 'checkbox'" class="options-container">
                <div v-for="(item, index) in formData.options" :key="index" class="option-item">
                    <el-checkbox :label="item">{{ item }}</el-checkbox>
                    <el-button type="danger" link @click="removeOption(formData.options, index)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                    </el-button>
                </div>
                <el-button type="primary" link @click="addOption(formData.options)" class="add-option-btn">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    添加选项
                </el-button>
            </div>
            <div v-else-if="formData.type === 'textarea'" class="textarea-container">
                <el-input type="textarea" rows="3" placeholder="请输入内容"></el-input>
            </div>
        </div>
        <slot></slot>
    </div>
</template>

<style scoped>
.form-item {
    display: flex;
    gap: 20px;
    border: 1px solid #e6e6e6;
    padding: 20px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.form-item:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.form-index {
    width: 24px;
    height: 24px;
    background-color: #409EFF;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.form-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-header {
    margin-bottom: 8px;
}

.title-input {
    font-size: 16px;
    font-weight: 500;
}

.form-desc {
    margin-bottom: 16px;
}

.options-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background-color: #f5f7fa;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.option-item:hover {
    background-color: #ecf5ff;
}

.add-option-btn {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.textarea-container {
    margin-top: 8px;
}

:deep(.el-input__wrapper) {
    box-shadow: none !important;
}

:deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px #dcdfe6 inset !important;
}

:deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #409EFF inset !important;
}
</style>